<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>ModalBox Functional Test</title>
	
	<script type="text/javascript" src="../../lib/prototype.js"></script>
	<script type="text/javascript" src="../../lib/scriptaculous.js?load=effects"></script>
	
	<script type="text/javascript" src="../../modalbox.js"></script>
	<link rel="stylesheet" href="../../modalbox.css" type="text/css" />
	
	<style type="text/css" media="screen">
		#MB_loading {
			font-size: 13px;
		}
		#errmsg {
			margin: 1em;
			padding: 1em;
			color: #C30;
			background-color: #FCC;
			border: 1px solid #F00;
		}
	</style>
	
</head>

<body>
	<form action="#" method="get" accept-charset="utf-8">

		<h1>ModalBox Functional Test</h1>

		<ul>
			<li><a href="_ajax_js.html?v=3" title="Modalbox JS passing test" onclick="Modalbox.show(this.href, {title: this.title, width: 300, afterLoad: function(){ alert('Callback test: ' + $('modalLink').inspect()) } }); return false;">Modalbox JS passing test</a></li>
			<li><a href="_ajax_form.html?v=11" title="Modalbox Prevent Scroll Test" onclick="Modalbox.show(this.href, {title: this.title}); return false;">Modalbox 'TAB'-key Handler &amp; Prevent Scroll Test</a></li>

			<script type="text/javascript" charset="utf-8">
			var node = new Element("div", {className: "warning", style: "border: 1px solid #0F0; display:none"}).update(
				new Element('p').update('Are you sure to delete this item?')
			).insert(
				new Element("input", {type: "button", value: "Yes, delete it!", id: "deleteBut"})
			).insert(
				new Element('span').update(' or ')
			).insert(
				new Element("input", {type: "button", value: "No, leave it", id: "cancelBut"})
			);

			function setObservers ()
			{
				$('deleteBut').observe('click', Modalbox.hide.bindAsEventListener(Modalbox));
				$('cancelBut').observe('click', Modalbox.hide.bindAsEventListener(Modalbox));
			}
			function removeObservers ()
			{
				$('deleteBut').stopObserving('click', Modalbox.hide.bindAsEventListener(Modalbox));
				$('cancelBut').stopObserving('click', Modalbox.hide.bindAsEventListener(Modalbox));
			}
			</script>

			<li><a href="#" title="Modalbox without Ajax Test" onclick="Modalbox.show(node, {title: this.title, afterLoad: setObservers, beforeHide: removeObservers }); return false;">Modalbox without Ajax Builder Test</a></li>
			<li><a href="#" title="Modalbox without Ajax plain HTML test" onclick="Modalbox.show('<h1>HTML Header</h1><input type=\'button\' value=\'Resize me +100\' onclick=\'Modalbox.resize(0, 120)\' /><input type=\'button\' value=\'Resize me -100\' onclick=\'Modalbox.resize(0, -100)\' /><script>alert(\'First: \' + $(\'MB_window\').inspect());</script>', {title: this.title, height: 250, afterLoad: function() { alert('Second' + $('MB_window').inspect()) } }); return false;">Modalbox without Ajax plain HTML test</a></li>
			<li><a href="#" title="Modalbox without Ajax by element ID test" onclick="Modalbox.show($('testContent'), {title: this.title, height: 250 }); return false;">Modalbox without Ajax by element ID test</a></li>
			<li><a href="#" title="Modalbox activate / deactivate test" onclick="Modalbox.show('<div style=\'padding: 10px; height:100%; background:#FFF; border: 1px solid #CCC\'><h1>Activate / Deactivate Test</h1><input type=\'button\' value=\'Deactivate\' onclick=\'Modalbox.deactivate()\' /><input type=\'button\' value=\'Activate\' onclick=\'Modalbox.activate()\' /><br /><br /></div>', {title: this.title }); return false;">Modalbox activate / deactivate test</a></li>
			<li><a href="_ajax_form.html" title="Modalbox without transitions" onclick="Modalbox.show(this.href, {title: this.title, transitions: false}); return false;">Modalbox without transitions</a></li>
			<li><a href="_ajax_form.html" title="Overlay opacity parameter test" onclick="Modalbox.show(this.href, {title: this.title, overlayOpacity: 0.1}); return false;">Overlay opacity parameter test</a></li>
			<li><a href="_ajax_method_get.php" title="GET/POST mixed methods test: Method GET" onclick="Modalbox.show(this.href, {title: this.title, params: {param: '1: via GET'} }); return false;">GET/POST mixed methods test</a></li>
			<li><a href="#" title="Modalbox without header test" onclick="Modalbox.show('<h1>No header modalbox</h1><input type=\'button\' value=\'Resize me (20,20)\' onclick=\'Modalbox.resize(20,20)\' /><input type=\'button\' value=\'Resize me -100\' onclick=\'Modalbox.resize(-20,-20)\' />', {title: false }); return false;">Modalbox without header test</a></li>
			<li><a href="#" title="Modalbox Ajax error test" onclick="Modalbox.show('http://www.google.com', {title: this.title }); return false;">Modalbox Ajax error test</a></li>
			<li><a href="#" title="Modalbox wrong parameter test" onclick="Modalbox.show(123, {title: this.title }); return false;">Modalbox wrong parameter test</a></li>
			<li><a href="#" title="Modalbox auto-focusing disabled test" onclick="Modalbox.show($('longTextContent'), {title: this.title, height: 200, autoFocusing: false, closeValue: 'Close me' }); return false;">Modalbox auto-focusing disabled test</a></li>
			<li><a href="_ajax_form.html?v=11" title="Modalbox beforeHide callback test" onclick="Modalbox.show(this.href, {title: this.title, beforeHide: function(){ window.serializedForm = Form.serialize('form'); }, afterHide: function() { $('content').update(serializedForm) } }); return false;">Modalbox beforeHide callback test</a></li>

			<li><a href="_ajax_form.html?v=7" title="Modalbox resize methods test" onclick="Modalbox.show(this.href, {title: this.title}); return false;">Modalbox resize methods test</a></li>

			<li><a href="_ajax_content.html" title="Modalbox ASP.NET injecting test" onclick="Modalbox.show(this.href, {title: this.title, aspnet: true}); return false;">Modalbox ASP.NET injecting test</a></li>

		</ul>

		<br />

		<select name="select1" id="select1" size="1">
			<optgroup label="Label Text">
				<option value="Value" selected="selected" label="Label Text">  </option>
			</optgroup>
		</select>

		<select name="select2" id="select2" size="2" style="visibility: collapse">
			<option value="111" label="Label Text 1">Label Text 1</option>
			<option value="222" label="Label Text 2">Label Text 2</option>
		</select>

		<div id="testContent" style="display: none">
			<h1 style="background: url(../../spinner.gif) 0 -5px no-repeat; padding-left: 50px">Test for hidden HTML block</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<form action="#" method="get">
				<select name="select3" id="select3" size="1">
					<option value="Value" selected="selected" label="Label Text">  </option>
				</select>
				<br />
				<input type="text" name="text_field" value="This is the test field" id="text_field" />
				<input type="button" name="button_el" value="Test IDs are changed" id="button_el" onclick="$('text_field').value = 'Can access proper element by ID';" />
				<input type="button" name="close_btn" value="Close" id="close_btn" onclick="Modalbox.hide({beforeHide: function() { alert('Before hide callback'); } })" />
			</form>
		</div>

		<div id="longTextContent" style="display: none">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<input type="button" name="button" value="Close me" id="button" onclick="Modalbox.hide()" />
		</div>

		<div id="content" style="border:1px solid; height:1000px">
			Content
		</div>

		<p><a href="#" title="Modalbox without Ajax plain HTML test" onclick="Modalbox.show('<h1>HTML Header</h1><input type=\'button\' value=\'Resize me +100\' onclick=\'Modalbox.resize(0, 120)\' /><input type=\'button\' value=\'Resize me -100\' onclick=\'Modalbox.resize(0, -100)\' />', {title: this.title, height: 250 }); return false;">Modalbox window scrolling test</a></p>
	</form>
</body>
</html>
